import React from 'react';
import moment from 'moment';
import { DatePicker } from 'antd';
import { AxFormItemBase } from '../lib/AxFormItemBase';
import { AxLabel } from '@/components/AxBase';
import { AxDatePickerProps, AxRangePickerProps } from './AxDatePickerProps';

const { RangePicker } = DatePicker;
const range = (start: number, end: number) => {
  const result = [];
  for (let i = start; i < end; i++) {
    result.push(i);
  }
  return result;
};
const disabledDate = (current: any, disabledBeforeToday: boolean) => {
  if (disabledBeforeToday === true) {
    const date = new Date();
    const year = date.getFullYear();
    const month = date.getMonth();
    const day = date.getDate();
    // Can not select days before today and today
    return current && current < new Date(year, month, day);
  } else {
    return false;
  }
};
const disabledDateTime = (e: any, disabledBeforeToday: boolean) => {
  if (disabledBeforeToday === true) {
    const hour = new Date().getHours();
    const date = new Date().getDate();
    if (e === undefined || (e && e.date() && e.date() === date)) {
      return {
        disabledHours: () => range(0, hour),
        // disabledMinutes: () => range(30, 60),
        // disabledSeconds: () => [55, 56],
      };
    } else {
      return '-';
    }
  } else {
    return '-';
  }
};
const transDateTime = (val: any, fmt: string | string[]) => {
  if (val && !Array.isArray(val)) {
    if (val === '0001-01-01 00:00:00~0001-01-01 00:00:00') return null;
    const dt = val.split('~');
    if (dt && dt.length === 2) {
      return [moment(dt[0], fmt), moment(dt[1], fmt)];
    }
    return null;
  }
  return null;
};
/** 自定义日期选择控件
 * @param format 时间格式（默认YYYY-MM-DD HH:mm:ss）
 * @param disabledBeforeToday 是否使今天之前的日期无效（默认false）
 * @param showTime 是否展示时间选项（默认false）
 */
export const AxDatePicker: React.FC<AxDatePickerProps> = props => {
  const {
    isLabel = false,
    showTime = false,
    disabledBeforeToday = false,
    format = 'YYYY-MM-DD HH:mm:ss',
    value,
    ...rest
  } = props;

  /** 展示为Label */
  const WrappedComponent = isLabel === true ? AxLabel : DatePicker;

  /** DatePicker的属性 */
  const localProps = {
    format: format,
    showTime: showTime,
    style: { width: '100%' },
    disabledDate: (current: any) => disabledDate(current, disabledBeforeToday),
    disabledTime: (e: any) => disabledDateTime(e, disabledBeforeToday),
    value: value ? moment(value, format) : undefined,
    fieldDecoratorOptions: {
      getValueFromEvent: (args: any) => {
        if (args) {
          args._f = format;
        }
        return args;
      },
    },
  };

  return <AxFormItemBase WrappedComponent={WrappedComponent} {...localProps} {...rest} />;
};

/** 自定义日期范围选择控件
 * @param format 时间格式（默认YYYY-MM-DD HH:mm:ss）
 * @param disabledBeforeToday 是否使今天之前的日期无效（默认false）
 * @param showTime 是否展示时间选项（默认false）
 */
export const AxDateRangePicker: React.FC<AxRangePickerProps> = props => {
  const {
    isLabel = false,
    showTime = false,
    disabledBeforeToday = false,
    format = 'YYYY-MM-DD HH:mm:ss',
    value,
    ...rest
  } = props;

  /** 展示为Label */
  const WrappedComponent = isLabel === true ? AxLabel : RangePicker;

  /** DatePicker的属性 */
  const localProps = {
    format: format,
    showTime: showTime,
    style: { width: '100%' },
    value: value ? transDateTime(value, format) : undefined,
    placeholder: props.placeholder ? props.placeholder : [`${props.label}从`, `${props.label}到`],
    fieldDecoratorOptions: {
      getValueFromEvent: (args: any) => {
        if (args) {
          args._f = format;
        }
        return args;
      },
    },
  };

  return <AxFormItemBase WrappedComponent={WrappedComponent} {...localProps} {...rest} />;
};
